<template>
  <view class="box">
    <view class="search_box">
      <u-search clearabled @clear="reGetTipsList" @custom="reGetTipsList" @search="reGetTipsList"
        v-model="getCarTipsParm.search" placeholder="输入故障原因"></u-search>
    </view>
    <view class="car_tips_li" v-for="item in tipsInfo" :key="item.id">
      <view class="tips-t">
        <view class="tips-icon">
          <image mode="widthFix" :src="item.icon" />
        </view>
        <view class="tips-title">
          <view class="tips-h2">{{ item.title }}</view>
          <view class="ts" v-if="item.tips != '' ? true : false">{{
            item.tips
          }}</view>
        </view>
      </view>
      <view class="tips-p">
        <text>{{ item.content.replace(/\\n/g, '\n') }}</text>
      </view>
    </view>
    <!-- text="故障提示内容为空" -->
    <u-empty mode="search" v-if="tipsInfo.length === 0" icon="https://www.kamlung.net/images/other/search1.png">
    </u-empty>
    <!-- <uni-load-more :status="status" /> -->
    <view class="service_box">
      <view class="title">如果您未找到相应故障，也可咨询以下电话</view>
      <view class="list" :key="item.id" v-for="(item, index) in centers">
        <view class="list_icon">
          <image class="img" :src="`${baseUrl}/images/brand/${groupInfo[1].logoUlr}`" />
        </view>
        <view class="list_content" :class="{ topBor: index > 0 }" @click="callPhone(item.hotline)">
          <view class="list_name">{{ item.value }}</view>
          <view class="list_phone"> {{ item.hotline }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { carTipsList } from '@/API/reqData'
import { mapState } from 'vuex'
let flag = true
export default {
  data() {
    return {
      // 基础路径
      baseUrl: this.$baseUrl,
      // status: 'loading',
      totalPage: 0,
      // 客服
      // serviceList: [],
      getCarTipsParm: {
        page: 1,
        pageSize: 10,
        brand_id: '',
        search: '',
      },
      // 故障列表
      tipsInfo: [],
    }
  },
  onLoad() {
    let { brand_id } = this.brandInfo
    this.getCarTipsParm.brand_id = brand_id
    // 混合分享信息
    this.shareMixin.title = `故障查询`
    this.shareMixin.path = `/pages/CarTipsList`
    // 故障列表
    this.getCarTipsList()
  },
  methods: {
    reGetTipsList() {
      this.tipsInfo = []
      // 故障列表
      this.getCarTipsParm.page = 1
      flag = true
      this.getCarTipsList()
    },
    async getCarTipsList(cb) {
      const {
        data: { data, total },
      } = await carTipsList(this.getCarTipsParm)
      this.tipsInfo = Object.freeze([...this.tipsInfo, ...data])
      // 总页数
      this.totalPage = total
      cb && cb()
    },
    // 下拉事件
    onPullDownRefresh() {
      this.tipsInfo = []
      // 故障列表
      this.getCarTipsParm.page = 1
      flag = true
      this.getCarTipsList(uni.stopPullDownRefresh)
    },
    // 触底事件
    onReachBottom() {
      if (this.tipsInfo.length < this.totalPage) {
        this.getCarTipsParm.page++
        // 故障列表
        this.getCarTipsList()
      } else {
        if (!flag) return false
        uni.$showMsg('没有更多数据了!')
        flag = false
      }
    },
    // 打电话
    callPhone(e) {
      uni.makePhoneCall({
        phoneNumber: `${e}`,
      })
    },
  },
  computed: {
    ...mapState(['brandInfo', 'groupInfo', 'centers']),
  },
}
</script>

<style lang="scss">
.u-empty {
  padding: 150rpx 0;
}

.box {
  padding-top: 150rpx;
  background-color: #f5f5f5;

  // position: relative;
  .search_box {
    width: 100%;
    // height: 100%;
    padding: 20rpx 18rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: fixed;
    z-index: 99;
    // position: absolute;
    top: 0;
    left: 0;
  }

  .car_tips_li {
    background: #fff;
    margin: 0rpx 50rpx 60rpx;
    padding: 30rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.15);
    border-radius: 20rpx;
    box-sizing: border-box;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

    .tips-t {
      text-align: center;
      display: flex;
      padding-bottom: 20rpx;
      box-sizing: border-box;

      .tips-icon {
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 30rpx;
        box-sizing: border-box;

        image {
          width: 100%;
        }
      }

      .tips-title {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .tips-h2 {
          font-size: 38rpx;
          font-weight: 600;
          padding-bottom: 10rpx;
          margin-bottom: 8rpx;
          border-bottom: 2rpx solid #ececec;
        }

        .ts {
          font-size: 22rpx;
          color: #dd444c;
        }
      }
    }

    .tips-p {
      text {
        line-height: 42rpx;
        display: block;
      }
    }
  }

  .service_box {
    margin: 40rpx 0rpx;
    padding: 20rpx;
    background-color: #fff;
    // border-radius: 12rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    box-shadow: $theme-shadow;

    // border: 1px solid #ccc;
    .title {
      font-size: 32rpx;
      color: #222;
      text-align: center;
      font-weight: 600;
      line-height: 100rpx;
    }

    .list {
      display: flex;
      align-items: center;

      .list_icon {
        width: 60rpx;
        height: 60rpx;

        .img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      .list_content {
        margin-left: 30rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;

        &.topBor {
          border-top: 1px solid #eee;
          // border: none;
        }

        // border-bottom: 1rpx solid #eee;
        .list_name {
          font-size: 26rpx;
          line-height: 80rpx;
        }

        .list_phone {
          font-size: 26rpx;
          line-height: 80rpx;
          text-align: end;
        }
      }
    }
  }
}
</style>
